<template>
	<view class="store-video-info">
		<block v-if="show">
			<video :src="videoInfo.link" class="video-box" :poster="videoInfo.image"></video>
			<view class="video-info">
				<view class="video-info-tit">{{videoInfo.name}}</view>
				<view class="video-info-des">
					<text>{{videoInfo.brief}}</text>
				</view>
			</view>
			<view class="video-info-recomment">
				<pt-title name="相关视频" leftSize="32" padding="0 30rpx" :isRight="false"></pt-title>
				<view class="video-info-recomment-list">
					<view class="video-info-recomment-item" v-for="(data,index) in recommentList" :key="index" @click="goVideoInfo(data.video_id)">
						<image :lazy-load="true" mode="aspectFill" :src="data.image"></image>
						<view class="video-info-recomment-item-info">
							<view class="video-info-recomment-item-tit">{{data.name}}</view>
							<view class="video-info-recomment-item-des">{{data.brief}}</view>
							<view class="video-info-recomment-item-times">{{data.comment_count}}评论</view>
						</view>
					</view>
				</view>
				<pt-jump-more text="查看更多" @more="goVideoList"></pt-jump-more>
			</view>
			
			<view class="video-info-comment">
				<pt-title name="热门评论" leftSize="32" padding="0 30rpx" :isRight="false"></pt-title>
				<view class="comment-list-box">
					<block v-if="commentList.length">
						<view class="comment-item" v-for="(data,index) in commentList" :key="index">
							<view class="comment-item-user">
								<image :lazy-load="true" :src="data.heard_img" mode="aspectFill"></image>
								<view class="comment-item-user-info">
									<view class="comment-item-user-name">{{data.nickname}}</view>
									<view class="comment-item-user-time">
										<text class="time">{{data.add_time}}</text>
									</view>
								</view>
							</view>
							<view class="comment-item-content">{{data.content}}</view>
						</view>
					</block>
				</view>
				<pt-loading-more v-if="isLoading"></pt-loading-more>
				<pt-nomore v-if="noMore && commentList.length"></pt-nomore>
				<pt-nothing v-if="noMore && !commentList.length" :text="'暂无评论'" bg-color="#FFF" :isHigh="true"></pt-nothing>
			</view>
			<view class="video-info-form">
				<view class="video-info-form-input">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-14/20200814/b350ba7854abc7c9c6feaf38a0fcd015.png"></image>
					<input class="uni-input" confirm-type="done" @confirm="confirm" placeholder="说点什么..." v-model="content"/>
				</view>
				<view class="video-info-form-share">
					<button open-type="share">
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon5.png" mode="aspectFit"></image>
						<view>分享</view>
					</button>
				</view>
				<view class="video-info-form-comment">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/merchant/icon11.png" mode="aspectFit"></image>
					<view>{{videoInfo.comment_count}}</view>
				</view>
			</view>
		</block>
		
		<pt-loading></pt-loading>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				video_id: '',
				videoInfo: '',
				recommentList: [],
				commentList: [],
				page: 0,
				isLoading: false,
				noMore: false,
				content: ''
			};
		},
		onLoad(options) {
			if(options.video_id){
				this.video_id = options.video_id
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).pid)
				uni.setStorageSync('newurl','/merchant/store-video/store-video-info?video_id='+this.filterUrlParam(scene).v_id+'&parent_id='+this.filterUrlParam(scene).pid)
				this.video_id = this.filterUrlParam(scene).v_id
				if(uni.getStorageSync('userInfo')){
					this.$u.api.binding_refer({id: this.filterUrlParam(scene).pid}).catch(() => {
						console.log('接口报错：绑定失败')
					})
				}
			}
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			this.init()
			this.getComment()
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.api.storeVideoList({ paramter: 1, video_id: this.video_id }).then(res => {
					this.videoInfo = res.datas[0]
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					this.$u.mpShare = {
						title: this.videoInfo.name,
						path: '/merchant/store-video/store-video-info?video_id=' + this.video_id + '&parent_id' + user_id,
						imageUrl: this.videoInfo.image
					}
				}).then(res => {
					this.show = true
					this.$u.api.storeVideoList({recommend: 1,video_id: this.video_id,store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id: 1}).then(res => {
						this.recommentList = res.datas
					})
				})
			},
			getComment(){
				this.$u.api.VideoComment({ video_id: this.video_id,page: this.page }).then(res => {
					this.isLoading = false
					if(res.datas.length){
						res.datas.forEach(item => {
							this.commentList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			goVideoInfo(video_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/merchant/store-video/store-video-info?video_id='+video_id
				})
			},
			goVideoList(){
				uni.redirectTo({
					url: '/merchant/store-video/store-video'
				})
			},
			confirm(e){
				if(!e.detail.value){
					uni.showToast({
						icon: 'none',
						title: '留言内容不能为空'
					})
					return
				}
				this.$u.api.AddVideoComment({
					content: e.detail.value,
					video_id: this.video_id,
					sort: 0
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '评论成功'
					})
					this.content = ''
					this.page = 0
					this.commentList = []
					this.noMore = false
					this.getComment()
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.getComment()
			}
		}
	}
</script>

<style lang="scss">
	.store-video-info{
		padding-bottom: 120rpx;
		.video-box{
			width: 100%;
			height: 600rpx;
			vertical-align: top;
		}
		.video-info{
			padding: 30rpx 30rpx 0;
			border-bottom: solid 20rpx #F4F4F4;
			.video-info-tit{
				text-align: center;
				font-size: 42rpx;
				color: #141414;
				font-weight: bold;
			}
			.video-info-des{
				padding: 60rpx 30rpx;
				color: #444;
				line-height: 52rpx;
				font-size: 24rpx;
			}
		}
		.video-info-recomment{
			border-bottom: solid 20rpx #F4F4F4;
			padding: 50rpx 0;
			.video-info-recomment-list{
				padding: 0 30rpx 60rpx;
				.video-info-recomment-item{
					margin-top: 50rpx;
					display: flex;
					image{
						width: 260rpx;
						height: 210rpx;
						border-radius: 8rpx;
					}
					.video-info-recomment-item-info{
						flex: 1;
						min-width: 0;
						margin-left: 20rpx;
						.video-info-recomment-item-tit{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 32rpx;
							color: #141414;
						}
						.video-info-recomment-item-des{
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							color: #757575;
							font-size: 24rpx;
							line-height: 42rpx;
							margin: 25rpx 0;
						}
						.video-info-recomment-item-times{
							font-size: 20rpx;
							color: #757575;
						}
					}
				}
			}
		}
		.video-info-form{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFF;
			z-index: 5;
			display: flex;
			align-items: center;
			height: 120rpx;
			background-color: #FFF;
			padding: 20rpx 30rpx;
			border-top: solid 2rpx #F4F4F4;
			.video-info-form-input{
				flex: 1;
				min-width: 0;
				background-color: #F8F8F8;
				display: flex;
				align-items: center;
				height: 80rpx;
				padding: 0 30rpx;
				image{
					width: 29rpx;
					height: 28rpx;
				}
				input{
					flex: 1;
					min-width: 0;
					margin: 0 15rpx;
					font-size: 26rpx;
				}
			}
			.video-info-form-share{
				text-align: center;
				margin-left: 20rpx;
				color: #141414;
				button{
					background-color: transparent;
					line-height: normal;
					font-size: 20rpx;
					&::after{
						display: none;
					}
				}
				image{
					width: 33rpx;
					height: 33rpx;
					margin: 5rpx 0;
				}
			}
			.video-info-form-comment{
				text-align: center;
				margin-left: 20rpx;
				font-size: 20rpx;
				color: #141414;
				image{
					width: 33rpx;
					height: 33rpx;
					margin: 5rpx 0;
				}
			}
		}
		.video-info-comment{
			padding: 50rpx 0;
			.comment-list-box{
				.comment-item{
					padding: 30rpx;
					margin: 50rpx 30rpx 0;
					position: relative;
					background-color: #F2F2F2;
					border-radius: 8rpx;
					&::after{
						content: '';
						position: absolute;
						bottom: 0;
						right: 30rpx;
						left: 116rpx;
						height: 2rpx;
						background-color: #F4F4F4;
					}
					&:last-child::after{
						display: none;
					}
					.comment-item-user{
						display: flex;
						align-items: center;
						image{
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
						}
						.comment-item-user-info{
							flex: 1;
							min-width: 0;
							margin-left: 20rpx;
							.comment-item-user-name{
								font-size: 24rpx;
								font-weight: bold;
								color: #333;
								margin-bottom: 10rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.time{
									font-weight: normal;
									color: #999;
								}
							}
							.comment-item-user-time{
								font-size: 22rpx;
								color: #909090;
								text{
									margin-right: 20rpx;
								}
							}
						}
					}
					.comment-item-content{
						margin-left: 86rpx;
						padding: 30rpx 0 0;
						font-size: 28rpx;
						line-height: 48rpx;
						color: #141414;
					}
					.comment-item-imgs{
						margin-left: 86rpx;
						image{
							width: 188rpx;
							height: 188rpx;
							border-radius: 4rpx;
							margin-right: 20rpx;
							margin-top: 40rpx;
							&:nth-child(3n){
								margin-right: 0;
							}
						}
					}
					.comment-reply{
						margin-left: 86rpx;
						margin-top: 40rpx;
						padding: 25rpx;
						position: relative;
						background-color: #F8F8F8;
						color: #757575;
						font-size: 24rpx;
						line-height: 48rpx;
						&::after{
							position: absolute;
							content: '';
							width: 0;
							height: 0;
							border-left: 10rpx solid transparent;
							border-right: 10rpx solid transparent;
							border-bottom: 10rpx solid #F8F8F8;
							top: -10rpx;
							left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
